<template>
  <div class="test-container page-container">
    <div class="page-title">Unit Test Page</div>
    <p>count is: {{ count }}</p>
    <div v-for="(item, index) in arr" :key="index">
      {{ item.name }}
    </div>
    <div>
      {{ data.name }}
      {{ data.sex }}
    </div>
    <div>{{ obj1.name }}</div>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

interface Res {
  pageSize: number
  pageIndex: number
}

const resp = (res: Res) => {
  console.log(res)
}

resp({ pageSize: 1, pageIndex: 10 })

// type formobj = {
//   name: string
//   sex: string
// }
type formobj = {
  name: string | number
  sex: string
}
// a.pageSize = 1
const count = ref<number>(0)
const arr = ref<Array<any>>()
const arr2 = ref<Array<number>>()
const obj1 = ref<formobj>({
  name: 666,
  sex: '1'
})
const data = reactive({
  name: '好好',
  sex: 1
})
const increment = (): void => {
  count.value += 1
  arr.value = [
    { name: 1, sex: 1 },
    { name: 2, sex: 2 }
  ]
  arr2.value = [1, 2, 3]
  data.name = 'asdadwdawdawawdad阿斯蒂芬'
}
</script>

<style scoped lang="scss">
button {
  cursor: pointer;
  font-size: 20px;
  padding: 5px;
}
</style>
